<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<%@ include file="/WEB-INF/views/coupon/parkingLotCouponsTmpl.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>停车券详细发放记录</title>
    <link rel="stylesheet" href="${ctx}/static/plug/frozenui-1.3.0/css/frozen.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/css/user/register.css" media="all">
    <script src="${ctx}/static/js/laydate/laydate.js"></script>
    <style type="text/css">
        .content {
            padding-top: 10px;
            padding-left: 20px;
            padding-right: 20px
        }

        .selected-content {
            margin-top: 0px;
            padding-bottom: 0px;
            padding-top: 0px;
            background-color: #469fe3;
            color: white;
            border-radius: 0px;
            border: 1px solid #469fe3
        }

        .unselected-content {
            margin-top: 0px;
            padding-bottom: 0px;
            padding-top: 0px;
            background-color: #f8f8f8;
            color: #25282e;
            border-radius: 0px;
            border: 1px solid #469fe3
        }

        .select-li {
            border-radius: 0px;
            border: 1px solid #469fe3
        }

        .select-date {
            border-radius: 0px;
            border: 1px solid #469fe3
        }

        .div-noUnpay {
            margin: 0px auto;
            text-align: center;
            color: #898989;
            padding-top: 10px;
            width: 100%
        }
    </style>
</head>
<body>
<header class="ui-header ui-header-stable  ui-container" style="margin-top: 5%;">
    <div class="ui-tiled" id="tabDivDate" style="width: 100%;">
        <ul class="ui-tiled ui-border">
            <li class="select-li" id="today">今日</li>
            <li class="select-li" style="font-size:13px" id="yesterday"></li>
            <li class="select-li" style="font-size:13px" id="twooldday"></li>
            <li class="select-li select-date" style="font-size:13px" id="spanDateSelected">其他日期
            </li>
        </ul>
    </div>
</header>
<section class="ui-container" style="margin-top: 40px;">
    <div class="ui-tab ui-tab-revenue" id="tab1">
        <ul class="ui-tab-content" style="width: 100%">
            <li>
                <ul class="ui-list ui-list-pure ui-border-tb" id="ulReleaseCoupons" nowPage="1" type="1"
                    tmpl="ulReleaseCouponsTmpl">
                    <c:if test="${voList != null &&  fn:length(voList) > 0 }">
                        <c:forEach var="voItem" items="${voList}">
                            <li class="ui-border-t">
                                <div class="ui-row-flex" style="font-size: 17px;">
                                    <div class="ui-col ui-col-2">
                                        <span style="font-size: 15px;">${voItem.parkingShopName}</span>
                                        <p class="ui-txt-info" style="font-size: 12px;">
                                            发放:&nbsp;${voItem.totalMoney/10}&nbsp; 元,共&nbsp; ${voItem.totalCount} &nbsp;张
                                        </p>
                                        <p class="ui-txt-info" style="font-size: 12px;">
                                            有效使用:&nbsp;${voItem.usedMoney/10}&nbsp; 元,共&nbsp; ${voItem.usedCount} &nbsp;张
                                        </p>
                                    </div>
                                    <div class="ui-col"
                                         style="font-size: 30px;padding-top:10px; padding-right: 5px; text-align: right;">
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </c:if>
                    <c:if test="${voShop != null &&  fn:length(voShop) > 0 }">
                        <c:forEach var="voItem" items="${voShop}">
                            <li class="ui-border-t">
                                <div class="ui-row-flex" style="font-size: 17px;">
                                    <div class="ui-col ui-col-2">
                                        ￥<span style="font-size: 15px;">${voItem.money / 10 }
                                                                     </span>
                                        <p class="ui-txt-info" style="font-size: 12px;">
                                            赠送于:&nbsp;${voItem.createTime}
                                        </p>
                                        <p class="ui-txt-info" style="font-size: 12px;">
                                            状态:&nbsp;${voItem.status}
                                        </p>
                                    </div>
                                    <div class="ui-col"
                                         style="font-size: 30px;padding-top:10px; padding-right: 5px; text-align: right;">
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </c:if>
                    <c:if test="${(voList == null ||  fn:length(voList) == 0)&&(voShop == null ||  fn:length(voShop) == 0) }">
                        <div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start"
                             style="height: 450px; overflow: auto; background-color: #f8f8f8">
                            <div id="noCashTransDiv" class="div-noUnpay">
                                <div>
                                    <img alt="" src="${ctx}/static/image/recharge/nodata.png" width="150px">
                                </div>
                                <div class="div-text" style="padding-top: 20px">无发放停车券记录</div>
                            </div>
                        </div>
                    </c:if>
                </ul>
            </li>

        </ul>
    </div>
</section>
<section id="dialog">
    <div class="ui-dialog" id="div_dialog">
    </div>
</section>
</body>
<script src="${ctx}/static/plug/frozenui-1.3.0/lib/zepto.min.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/js/frozen.js"></script>
<script>
	
    function dataLeftCompleting(value){
        return parseInt(value) < 10 ? "0" + value : value;
    }

    function GetDateStr(AddDayCount) {
        var dd = new Date();
        dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1;//获取当前月份的日期
        var d = dd.getDate();
        return y + "-" + dataLeftCompleting(m) + "-" + dataLeftCompleting(d);
    }

    var paramObj = {
        "parkingLotCouponsParams": "${parkingLotCouponsParams}",
        "authId":"${bmsUser.id}"
    };

    $(function () {
        var yesterday = GetDateStr(-1);
        $("#yesterday").attr("value", yesterday);
        $("#yesterday").html(yesterday);
        var twooldday = GetDateStr(-2);
        $("#twooldday").attr("value", twooldday);
        $("#twooldday").html(twooldday);
        var today = GetDateStr(0);
        $("#today").attr("value", today);
        console.log('${date}');//
        if(today=='${date}'){
            $("#today").removeClass("unselected-content");
            $("#today").addClass("selected-content");
        }else if(yesterday=='${date}'){
            $("#yesterday").removeClass("unselected-content");
            $("#yesterday").addClass("selected-content");
        }else if(twooldday=='${date}'){
            $("#twooldday").removeClass("unselected-content");
            $("#twooldday").addClass("selected-content");
        }else{

            $("#spanDateSelected").removeClass("unselected-content");
            $("#spanDateSelected").addClass("selected-content");
            $("#spanDateSelected").html('${date}');
            $("#spanDateSelected").attr("value", '${date}');
        }

        var initFlag = true;
        $("#spanDateSelected").bind("click", function () {
            $(".ui-dialog").addClass("show");
            if (initFlag) {
                initDateSelected();
                initFlag = false;
            }
        });
        var currentDate = new Date().format("yyyy-MM-dd").toString();
        $(".select-li").click(function () {
            var select_date = $(this).attr("value");
            if ($(this).hasClass("selected-content")) {
                return;
            }
            if (isNull(select_date)) {
                return;
            }
            removeClass();
            $(this).removeClass("unselected-content");
            $(this).addClass("selected-content");
            changeDate();
        });

        var isLoading = false;

        function scrollFn() {
            var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
            //视窗的高度
            var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
            //隐藏的高度
            var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            if (pageHeight - viewportHeight - scrollHeight < 10) {//如果满足触发条件，执行
                //console.log("scrollFn....");
                if (isLoading) {
                    return;
                }
                isLoading = true;
                loadingData();
                //isLoading =false;
            }
        }

        var previousDate = "";

        function loadingData() {
            if ($("#ulReleaseCoupons").find(".nodata-div").length > 0) {
                isLoading = false;
                return;
            }
            $("#ulReleaseCoupons").append(getLoadingDiv());
            var page = parseInt($("#ulReleaseCoupons").attr("nowPage")) + 1;
            var chargeType = parseInt($("#ulReleaseCoupons").attr("type"));
            var selectDate = $(".selected-content").attr("value");
            var param = {
                "params": paramObj.parkingLotCouponsParams,
                "page": page,
                "date": selectDate,
                "authId":paramObj.authId
            };
            console.log("previousDate:" + previousDate + ",selectDate:" + selectDate);
            console.log(param);
            $.post("${action}", param, function (data) {
                console.log(data);
                removeLoadingDiv();
                if (data.voList) {
                    var listData = data.voList;
                    var tplId = $("#ulReleaseCoupons").attr("tmpl");
                    if (listData == null || listData.length == 0) {
                        if (page == 1) {
                            var tpl = $("#" + tplId + "NoData").html();
                            //console.log("no data.............\n"+tpl);
                            $("#ulReleaseCoupons").append(template(tpl, {ctx: "${ctx}"}));
                        } else {
                            $("#ulReleaseCoupons").append(getNoMoreDataDiv());
                        }
                    } else {
                    	var html="";
                   	 for (var t = 0; t < listData.length; t++) {
                   		  html+='<li class="ui-border-t"><div class="ui-row-flex" style="font-size: 17px;"><div class="ui-col ui-col-2">'+
                              '<span style="font-size: 15px;">'+listData[t].parkingShopName+'</span><p class="ui-txt-info" style="font-size: 12px;">'+
                            '发放:&nbsp;'+listData[t].totalMoney/10+'.0&nbsp; 元,共&nbsp; '+listData[t].totalCount+' &nbsp;张</p><p class="ui-txt-info" style="font-size: 12px;">'+
                            '有效使用:&nbsp;'+listData[t].usedMoney/10+'.0&nbsp; 元,共&nbsp; '+listData[t].usedCount+' &nbsp;张</p></div>'+
                          '<div class="ui-col" style="font-size: 30px;padding-top:10px; padding-right: 5px; text-align: right;"></div></div></li>'
						}
                   	 $("#ulReleaseCoupons").html(html)
                    }
                } else if(data.voShop){
                	var dataList=data.voShop;
                	 if (dataList == null || dataList.length == 0) {
                         if (page == 1) {
                             var tpl = $("#" + tplId + "NoData").html();
                             //console.log("no data.............\n"+tpl);
                             $("#ulReleaseCoupons").append(template(tpl, {ctx: "${ctx}"}));
                         } else {
                             $("#ulReleaseCoupons").append(getNoMoreDataDiv());
                         }
                     } else {
                    	 var html="";
                    	 for (var t = 0; t < dataList.length; t++) {
                    		  html+='<li class="ui-border-t"><div class="ui-row-flex" style="font-size: 17px;"><div class="ui-col ui-col-2">'+
                                 '￥<span style="font-size: 15px;">'+dataList[t].money/10+".0"+'</span>'+
                                 '<p class="ui-txt-info" style="font-size: 12px;">赠送于:&nbsp;'+dataList[t].createTime+'</p>'+
                                ' <p class="ui-txt-info" style="font-size: 12px;">状态:&nbsp;'+dataList[t].status+'</p></div>'+
                             '<div class="ui-col"style="font-size: 30px;padding-top:10px; padding-right: 5px; text-align: right;"></div></div></li>'
						}
                    	 $("#ulReleaseCoupons").html(html)
                     }
                	
                	
                	
                	
                	
                	
                	
                	
                }
                isLoading = false;
                previousDate = selectDate;
            });
        }

        function changeDate() {
            $("#ulReleaseCoupons").empty();
            //初始化页数:
            $("#ulReleaseCoupons").attr("nowPage", 0);
            loadingData();
        }

        function initDateSelected() {
            var currentDate = new Date().format("yyyy-MM-dd").toString();
            $("#spanDateSelected").html(currentDate);
            initFlag = false;
            laydate.render({
                show: true,
                min: GetDateStr(-30),
                max: GetDateStr(0),
                elem: '#div_dialog', //指定元素
                position: 'static',
                showBottom: false,
                btns: ['confirm'],
                done: function (value, date, endDate) {
                    removeClass();
                    $(".select-date").removeClass("unselected-content");
                    $(".select-date").addClass("selected-content");
                    $(".ui-dialog").removeClass("show");
                    $("#spanDateSelected").html(value/10);
                    $("#spanDateSelected").attr("value", value);
                    //var hrefUrl = "${action}?params=" + paramObj.transDetailParams + "&date=" + value;window.location.href = hrefUrl;
                    changeDate();
                }
            });
        }

        function removeClass() {
            $(".select-li").removeClass("selected-content");
            $(".select-li").addClass("unselected-content");
        }

        $(window).bind("scroll", scrollFn);

        var tab = new fz.Scroll('.ui-tab', {
            role: 'tab',
            autoplay: false,
            interval: 3000
        });
        /* 滑动开始前 */
        tab.on('beforeScrollStart', function (from, to) {
            //console.log(from, to);
        })
        /* 滑动结束 */
        tab.on('scrollEnd', function (curPage) {
            //console.log(curPage);
            changeDate();
        });
    });


</script>
</html>
